<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/910ce80589.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.container{
    position: relative;
    width:100%;
    height:100vh;
    background-image:linear-gradient(90deg, #3d1f52, #7940a8);
    overflow: hidden;
}
header{
    position: relative;
    width:100%;
    padding:40px 0;
    display:flex;
    justify-content: space-around;
    align-items:center;
    z-index:2;
}
.logo a{
    text-decoration:none;
    font-size:20px;
    text-transform: capitalize;
    color:#fff;
}
.menu ul{
    position: relative;
    display:flex;
}
.menu ul li{
    list-style:none;
    transform:scale(1);
    transition:0.3s;
}
.menu ul li:hover{
    transform:scale(0.8);
}
.menu ul li a{
    text-decoration:none;
    font-size:16px;
    color:#fff;
    text-transform: uppercase;
    margin:0 18px;
    cursor: pointer;
}
.socialIcon i{
    position: relative;
    font-size:16px;
    color:#fff;
    margin:0 12px;
    cursor: pointer;
    transition:0.5s;
}
.socialIcon i:hover{
    transform:translateY(-5px);
}
.cart p{
    font-size:16px;
    color:#fff;
    text-transform:uppercase;
    cursor: pointer;
}
.cart p span{
    position: relative;
    left:8px;
}
.swiper{
    position: absolute;
    width:100%;
    height:100vh;
    top:0vh;
    left:0vh;
}
.swiper-slide{
    position: relative;
    width:100%;
    height:100vh;
    background-image:linear-gradient(90deg, #353b7c, #4b8dbf);
}
.slide02{
    background-image:linear-gradient(90deg, #432752, #9952bc);
}
.slide03{
    background-image:linear-gradient(90deg, #30112a, #601f4d);
}
.slide04{
    background-image:linear-gradient(90deg, #412258, #8f4cc7);
}
.slideContent{
    position: relative;
}
.imgCon{
    position: absolute;
    top:18vh;
    left:35%;
    transform:translate(-50%,-50%);
}
.imgCon img{
    width:70%;
    animation:animated 5s linear infinite;
}
@keyframes animated{
    0%{
        transform:translateY(12px);
    }
    50%{
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(12px);
    }
}
.shadow{
    position: absolute;
    top:75vh;
    left:70vh;
}
.shadow img{
    width:70%;
    opacity:0.5;
}
.slideContent .titleName{
    position: absolute;
    top:35vh;
    left:30%;
    transform:translate(-50%,-50%);
    z-index:2;
    font-size:7rem;
    color:#fff;
    font-weight:900;
    text-transform: uppercase;
    letter-spacing:12px;
}
.slideContent .titleName span{
    -webkit-text-stroke: 2px rgb(255,255,255);
    color:transparent;
}
.productInfo{
    position: absolute;
    left:65vh;
    top:75vh;
}
.productDetils{
    position: relative;
    width:450px;
    height:180px;
    overflow:hidden;
}
.productDetils .info h2{
    color:#fff;
    padding:8px 0;
    font-size: 2rem;
}
.productDetils .info .rating i{
    font-size:12px;
    color:#fff;
    padding:8px 0;
}
.productDetils .info p{
    color:rgb(207,207,207);
    line-height:1.8;
}
.buybox{
    position: relative;
    left:70vh;
    top:-14vh;
    width:160px;
    height:60px;
    text-align:center;
    overflow: hidden;
}
.buybox a{
    text-decoration:none;
    text-transform: uppercase;
    color:#fff;
    font-size:1rem;
    font-weight:600;
    position: relative;
    cursor: pointer;
}
.buybox a::before{
    position: absolute;
    content:"";
    bottom:-12px;
    left:-15px;
    width:150%;
    height:1px;
    background-color:#fff;
    transition:0.3s;
}
.buybox a:hover::before{
    bottom:10px;
}
.arrow{
    position: absolute;
    top:35vh;
    width:250px;
    height:250px;
    border:1px solid rgba(255,255,255,0.192);
    border-radius:50%;
    color:#fff;
    transform:scale(1);
    cursor: pointer;
    transition:0.3s;
}
.arrow:hover{
    transform:scale(1.3);
}
.swiper-button-next{
    position: absolute;
    right:-12vh;
}
.swiper-button-prev{
    position: absolute;
    left:-12vh;
}
    </style>
    <title>creative Design</title>
</head>
<body>
    <div class="container">
        <header>
           <div class="logo">
               <a href="">mamondots</a>
           </div>
           <div class="menu">
               <ul>
                  <li><a href="">home</a></li>
                  <li><a href="">about us</a></li>
                  <li><a href="">products</a></li>
               </ul>
           </div>
           <div class="socialIcon">
              <i class="fa-brands fa-facebook-f"></i>
              <i class="fa-brands fa-instagram"></i>
              <i class="fa-brands fa-twitter"></i>
           </div>
           <div class="cart">
               <p>cart <span>(0)</span></p>
           </div>
        </header>
        <div class="swiper">
           <div class="swiper-wrapper">
               <div class="swiper-slide slide01">
                   <div class="slideContent">
                       <div class="imgCon">
                           <img src="img/shoe-1.webp">
                       </div>
                       <div class="shadow">
                          <img src="img/shadow.webp">
                       </div>
                       <h1 class="titleName">s<span>hish</span>ido</h1>
                       <div class="productInfo">
                           <div class="productDetils">
                               <div class="info">
                                   <h2>$949</h2>
                                   <div class="rating">
                                      <i class="fa-solid fa-star"></i>
                                      <i class="fa-solid fa-star"></i>
                                      <i class="fa-solid fa-star"></i>
                                      <i class="fa-solid fa-star"></i>
                                   </div>
                                   <p>Lorem ipsum dolor sit amet consectetur adipisicing    elit. <br>Harum autem nihil sunt ipsa cumque.
                                  </p>
                               </div>
                           </div>
                           <div class="buybox">
                               <a href="">buy now</a>
                           </div>
                       </div>
                   </div>
               </div>


               <div class="swiper-slide slide02">
                  <div class="slideContent">
                      <div class="imgCon">
                          <img src="img/shoe-2.webp">
                      </div>
                      <div class="shadow">
                         <img src="img/shadow.webp">
                      </div>
                      <h1 class="titleName">na<span>kas</span>one</h1>
                      <div class="productInfo">
                          <div class="productDetils">
                              <div class="info">
                                  <h2>$849</h2>
                                  <div class="rating">
                                     <i class="fa-solid fa-star"></i>
                                     <i class="fa-solid fa-star"></i>
                                     <i class="fa-solid fa-star"></i>
                                     <i class="fa-solid fa-star"></i>
                                  </div>
                                  <p>Lorem ipsum dolor sit amet consectetur adipisicing    elit. <br>Harum autem nihil sunt ipsa cumque.
                                 </p>
                              </div>
                          </div>
                          <div class="buybox">
                              <a href="">buy now</a>
                          </div>
                      </div>
                  </div>
              </div>

              <div class="swiper-slide slide03">
                  <div class="slideContent">
                      <div class="imgCon">
                          <img src="img/shoe-3.webp">
                      </div>
                      <div class="shadow">
                         <img src="img/shadow.webp">
                      </div>
                      <h1 class="titleName">mi<span>yas</span>ato</h1>
                      <div class="productInfo">
                          <div class="productDetils">
                              <div class="info">
                                  <h2>$449</h2>
                                  <div class="rating">
                                     <i class="fa-solid fa-star"></i>
                                     <i class="fa-solid fa-star"></i>
                                     <i class="fa-solid fa-star"></i>
                                     <i class="fa-solid fa-star"></i>
                                  </div>
                                  <p>Lorem ipsum dolor sit amet consectetur adipisicing    elit. <br>Harum autem nihil sunt ipsa cumque.
                                 </p>
                              </div>
                          </div>
                          <div class="buybox">
                              <a href="">buy now</a>
                          </div>
                      </div>
                  </div>
              </div>

              <div class="swiper-slide slide04">
                  <div class="slideContent">
                      <div class="imgCon">
                          <img src="img/shoe-4.webp">
                      </div>
                      <div class="shadow">
                         <img src="img/shadow.webp">
                      </div>
                      <h1 class="titleName">ki<span>tam</span>ura</h1>
                      <div class="productInfo">
                          <div class="productDetils">
                              <div class="info">
                                  <h2>$649</h2>
                                  <div class="rating">
                                     <i class="fa-solid fa-star"></i>
                                     <i class="fa-solid fa-star"></i>
                                     <i class="fa-solid fa-star"></i>
                                     <i class="fa-solid fa-star"></i>
                                  </div>
                                  <p>Lorem ipsum dolor sit amet consectetur adipisicing    elit. <br>Harum autem nihil sunt ipsa cumque.
                                 </p>
                              </div>
                          </div>
                          <div class="buybox">
                              <a href="">buy now</a>
                          </div>
                      </div>
                  </div>
              </div>


           </div>
           <div class="arrows">
               <div class="swiper-button-next arrow"></div>
               <div class="swiper-button-prev arrow"></div>
           </div>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
     var swiper = new Swiper(".swiper",{
        loop:true,
        speed:1200,
        effect:"fade",

        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
     });

     let animation = anime({
        targets:"header",
        translateY:[-80,0],
        opacity:[0,1],
        duration:800,
        easing:'easeInOutSine'
     });

     anime({
        targets:".imgCon",
        translateX:[-280,0],
        opacity:[0,1],
        duration:800,
        easing:'easeInOutSine',
     });

     anime({
        targets:".titleName",
        translateX:[280,0],
        opacity:[0,1],
        duration:800,
        easing:'easeInOutSine',
     });

     anime({
        targets:".info",
        translateY:[200,0],
        opacity:[0,1],
        duration:800,
        easing:'easeInOutSine',
     });

     anime({
        targets:".buybox",
        translateY:[100,0],
        opacity:[0,1],
        duration:800,
        easing:'easeInOutSine',
     });

     swiper.on('slideChangeTransitionStart',function(){
           
           anime({
           targets:".slideContent .titleName",
           translateX:[280,0],
           opacity:[0,1],
           duration:500,
           easing:'easeInOutSine',
       });

       anime({
           targets:".imgCon",
           translateX:[-280,0],
           opacity:[0,1],
           duration:500,
           easing:'easeInOutSine',
       });

       anime({
        targets:".info",
        translateY:[200,0],
        opacity:[0,1],
        duration:800,
        easing:'easeInOutSine',
     });

     anime({
        targets:".buybox",
        translateY:[100,0],
        opacity:[0,1],
        duration:800,
        easing:'easeInOutSine',
     });

     });


     
</script>
</body>
</html>